<template>
  <div class="device-type-count-table">
	  <div class="top">设备类型统计</div>
    <div v-for="(item,i) in datas" :key="i" >
      <ul>
        <li v-for="(items,index) in item" :key="index">{{items}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import Config from '../../../config'
export default {
  name: 'DeviceTypeCount',
  props: ['schedule'],
  data() {
    return {
      datas:[
        ['设备类型','消防栓','烟雾报警器','其他'],
        ['设备总数', 1,2,0],
        ['正常设备总数',2,3,0],
        ['异常设备总数',3,4,0]
      ]
    }
  },
  watch: {
    schedule() {
      this.message()
    }
  },
  methods: {
    message() {
      let arr = this.datas.slice(0)
      this.datas.splice(0)
        let url = `${Config.DEVICE_MANAGE_URL}/device_stie_user/count`

        // 消防
        let param = {
          devtype: 'nbiot',
          devname: 'scm'
        }
        // 烟雾
        let params = {
          devtype: 'nbiot',
          devname: 'fireplug'
        }

        this.$http.get(url, param).then((scm) => {
          this.$http.get(url, params).then((fireplug) => {
            arr[1][1] = scm.all_count
            arr[1][2] = fireplug.all_count

            arr[2][1] = scm.all_count - scm.abnormal_count
            arr[2][2] = fireplug.all_count - fireplug.abnormal_count

            arr[3][1] = scm.abnormal_count
            arr[3][2] = fireplug.abnormal_count
            this.datas = arr
            
          })
        })

        console.log(this.datas)
    },
  },
  mounted() {
    
  }
}
</script>

<style lang="scss" scoped>
.device-type-count-table{
  width: 100%;
  height: 100%;
  div{
    width: 100%;
    height: 40px;
    line-height: 40px;
    color:#12CEFF;
    font-size: 12px;
  }
  div:nth-child(even){
    background: rgba(26,77,159,0.2);
  }
  div:nth-child(2){
    color: orange;
  }
  .top{
    height: 30px;
    line-height: 23px;
    text-align: right;
    color: #598CC9;
    font-size: 14px;
    font-weight: bold;
  }
  ul{
    width: 100%;
    height: 100%;
    li{
      padding: 0 0 0 10px;
      box-sizing: border-box;
      height: 100%;
      width: 24%;
      float: left;
    }
    li:nth-child(1){
      width: 28%;
    }
  }
  
}
</style>
